<template>
  <div class="tool-text" :style="$methods.setStyle(tempStyle)">
    {{ text }}
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  mixins: [mixins],
  data() {
    return {
      innerHTML: null,
      text: "文本",
      attr: {
        fontSize: 16,
        fontColor: "#000",
        align: "center",
        middle: "center",
      },
    };
  },
  computed: {
    tempStyle() {
      return {
        fontSize: this.attr.fontSize,
        color: this.attr.fontColor,
		fontWeight:this.attr.fontWeight,
        align: this.attr.align,
        alignItems: this.attr.middle,
        justifyContent: this.attr.align,
      };
    },
  },
  methods: {
    input() {
      // console.log(this.$refs.editor.innerHTML)
      this.innerHTML = this.$refs.editor.innerHTML;
    },
    change(index) {
      console.log(this.innerHTML);
    },
  },
  pageData: {
    name: "tool-text",
    title: "文本",
    count: 0,
    width: 200,
    height: 40,
    config: {
      label: "文本",
      data: null,
      attr: [
        {
          key: "fontSize",
          title: "字体大小",
          formType: "text-number",
          type: "Number",
          data: 16,
          group: "basics",
        },
        {
          key: "fontColor",
          title: "字体颜色",
          formType: "color-picker",
          type: "String",
          data: "#000",
          group: "basics",
        },
		{
          key: "fontWeight",
          title: "字体加粗",
          formType: "weight-select",
          type: "String",
          data: "normal",
          group: "basics",
        },
        {
          key: "align",
          title: "水平居中",
          // hidden: true,
          formType: "text-align",
          type: "String",
          data: "center",
          group: "basics",
        },
        {
          key: "middle",
          title: "垂直居中",
          // hidden: true,
          formType: "text-middle",
          type: "String",
          data: "center",
          group: "basics",
        },
      ],
    },
  },
};
</script>

<style scoped>
.tool-text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: #000;
}
</style>
